<template>
  <div>
    <h1 style="text-align: center; font-size: 24px">历史接报列表</h1>

    <el-scrollbar height="36vw">
      <div
        v-for="(report, index) in reportInfo"
        :key="index"
        class="scrollbar-demo-item"
      >
        <p style="padding-top: 1.3vw">
          <span>接报ID：{{ report.reportID }}</span
          >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          接报状态：<span :style="fontColorStyle(report)"
            >●{{ report.reportState }}</span
          >
        </p>
        <p>
          <span>接报名称：{{ report.reportName }}</span
          >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span>接报类型：{{ report.eventType }}</span>
        </p>
        <p>
          <span>报警人：{{ report.reporter }}</span
          >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span>报警人电话：{{ report.reporterPhone }}</span>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span>报警时间：{{ formattedReportTime(report) }}</span>
        </p>
        <p>
          <span>最后更新者：{{ report.lastUpdater }}</span
          >&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span>最后更新时间：{{ formattedLastUpdateTime(report) }}</span>
        </p>
        <p>
          <span>事件ID：{{ report.eventID }}</span>
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
          <span>风险企业名称：{{ report.enterpriseName }}</span>
        </p>
        <el-button
          type="primary"
          class="button"
          plain
          @click="
            dialogInfo = true;
            display(report);
          "
          >查看详情</el-button
        >
       
      </div>
    </el-scrollbar>

    <el-dialog
          v-model="dialogInfo"
          title="查看接报详情"
          width="90vw"
          :style="{ height: '26vw' }"
        >
          <el-descriptions
            class="margin-top"
            :title="'接报ID：' + repoInfo.reportID"
            :column="3"
            size="default"
            border
          >
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon>
                    <tickets />
                  </el-icon>
                  事件类型
                </div>
              </template>
              <el-tag size="default">{{ repoInfo.eventType }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon><List /></el-icon>
                  接报名称
                </div>
              </template>
              {{ repoInfo.reportName }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon><InfoFilled /></el-icon>
                  接报状态
                </div>
              </template>
              <div :style="fontColorStyle(repoInfo)" class="state">
                ●{{ repoInfo.reportState }}
              </div>
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon>
                    <user />
                  </el-icon>
                  报警人
                </div>
              </template>
              {{ repoInfo.reporter }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon>
                    <iphone />
                  </el-icon>
                  报警人电话
                </div>
              </template>
              {{ repoInfo.reporterPhone }}
            </el-descriptions-item>
            <el-descriptions-item>
              <template #label>
                <div class="cell-item">
                  <el-icon>
                    <location />
                  </el-icon>
                  报警时间
                </div>
              </template>
              {{  repoInfo.reportTime }}
            </el-descriptions-item>
          </el-descriptions>
          <el-descriptions
            class="margin-top"
            title="附加信息"
            :column="3"
            size="default"
          >
            <el-descriptions-item label="事件ID">{{
              repoInfo.eventID
            }}</el-descriptions-item>
            <el-descriptions-item label="事件名">{{
              repoInfo.eventName
            }}</el-descriptions-item>
            <el-descriptions-item label="工作人员备注">{{
              repoInfo.remark
            }}</el-descriptions-item>
            <el-descriptions-item label="事件等级">
              <el-tag size="default">{{ repoInfo.eventLevel }}</el-tag>
            </el-descriptions-item>
            <el-descriptions-item label="最后更新者">
              {{ repoInfo.lastUpdater }}
            </el-descriptions-item>
            <el-descriptions-item label="最后更新时间">
              {{ repoInfo.lastUpdateTime }}
            </el-descriptions-item>
            <el-descriptions-item label="风险企业名称">
              {{ repoInfo.enterpriseName }}
            </el-descriptions-item>
            <el-descriptions-item label="企业合法人">
              {{ repoInfo.legalPerson }}
            </el-descriptions-item>
            <el-descriptions-item label="企业合法人电话">
              {{ repoInfo.legalpersonphone }}
            </el-descriptions-item>
          </el-descriptions>
        </el-dialog>
  </div>
</template>
  
<script setup>
import { ref, inject, computed } from "vue";
import { useRoute, useRouter } from "vue-router";
import { format, parseISO } from "date-fns";
import {
  Iphone,
  Location,
  OfficeBuilding,
  Tickets,
  User,
  List,
  InfoFilled,
} from "@element-plus/icons-vue";

const router = useRouter();
const route = useRoute();
const axios = inject("axios");
const reportInfo = ref({});
const dialogInfo = ref(false);
const repoInfo = ref({});

const display = (report) => {
  axios
    .post("Director/getReportById", {
      reportID: report.reportID,
    })
    .then((response) => {
      repoInfo.value = response.data;
      console.log(repoInfo.value);
    })
    .catch((error) => {
      console.log(error);
    });
};
const formattedReportTime = computed(() => {
  return (report) => {
    // 如果 report.reportTime 是一个 Date 对象，则直接使用它
    // 否则，假设它是一个 ISO 格式的字符串，使用 parseISO 转换为 Date 对象
    const date =
      report.reportTime instanceof Date
        ? report.reportTime
        : parseISO(report.reportTime);
    // 将日期格式化为 "yyyy年MM月dd日"
    return format(date, "yyyy年MM月dd日 HH:mm:ss");
  };
});

const formattedLastUpdateTime = computed(() => {
  return (report) => {
    const date =
      report.lastUpdateTime instanceof Date
        ? report.lastUpdateTime
        : parseISO(report.lastUpdateTime);
    return format(date, "yyyy年MM月dd日 HH:mm:ss");
  };
});
const fontColors = ref({
  待审批: "blue",
  已驳回: "red",
  专家审批中: "rgb(5, 106, 30)",
  指挥人员审批中: "rgb(2, 164, 164)",
  审核通过: "green",
});

//computed用于声明响应式依赖的计算属性
const fontColorStyle = computed(() => {
  return (report) => ({
    color: fontColors.value[report.reportState] || "black",
  });
});

const init = async () => {
  await axios
    .post("Director/listAllReportExceptApprovalPending", {})
    .then((response) => {
      reportInfo.value = response.data;
      console.log(reportInfo.value);
    })
    .catch((error) => {
      console.log(error);
    });
};
init();
</script>
  
  <style scoped>
.scrollbar-demo-item {
  height: 14vw;
  margin: 10px;
  border-radius: 4px;
  background: var(--el-color-primary-light-9);
  color: rgb(63, 59, 59);
  margin-left: 1vw;
  width: 80vw;
  position: relative;
}
p {
  margin-left: 2vw;
  margin-top: 1vw;
}
.button {
  position: absolute;
  margin-top: -7vw;
  margin-left: 70vw;
}
.el-descriptions {
  margin-top: 20px;
}
.cell-item {
  display: flex;
  align-items: center;
}
.margin-top {
  margin-top: 20px;
}
.state {
  font-weight: bold;
}
</style>